<template>
  <div class="container">
    <div class="flex-yc flex-xbt input-bgc">
      <h2>流程开发</h2>
      <div>
        <el-select v-model="appTabType" placeholder="请选择类型" class="input" style="width: 200px;">
          <el-option
            v-for="item in appTabs"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <div style="width: 10px;height: 100%;display: inline-block;"></div>
        <el-input
        class="input"
        placeholder="搜索"
        v-model="searchKeyword"
        :suffix-icon="Search"
        @input="onInputChange"
        ></el-input>
        <div style="width: 10px;height: 100%;display: inline-block;"></div>
        <el-button type="primary" size="small" @click="$router.push('/flowapp/create')">创建流程</el-button>
      </div>
    </div>
    <table-comp
      :column="column"
      index
      :list="appList"
      :total="total"
      :pageSize="pageSize"
      @onCurrentChange="onCurrentChange"
    >
      <template v-slot:handlePutStatusSlot="{ row }">
        <div class="putstatus" :class="row.putStatusStr === '已上架' ? 'on' : 'off'" @click="handelUpdatePutStatus(row.id)">
          <div class="dian"></div>
          <span class="text">{{row.putStatusStr}}</span>
        </div>
      </template>
      <template v-slot:handleSlot="{ row }">
        <el-button link type="primary" @click="$router.push('/smart/detail?flowId='+row.id+'&title='+row.flowName+'&handlerType=edit')">
          查看
        </el-button>
        <el-button link type="primary" @click="$router.push('/flowapp/create?appId='+row.id)">
          编辑
        </el-button>
        <el-button link type="primary" @click="$router.push('/flowapp/subindex?flowId='+row.id)">
          开发
        </el-button>
      </template>
    </table-comp>
  </div>

  <dialog-com
    v-model="isShowLog"
    title="查看运行日志"
    submitTxt="下载"
    width="500"
    :center="true"
    @onSubmit="onDownLog"
    @onClose="onCloseLog"
  >
    <template v-slot:headerTip>
      <app-log-header />
    </template>
    <app-log :data="logData"></app-log>
  </dialog-com>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import TableComp from '@/components/table/index.vue'
import { ref, reactive, onMounted } from 'vue'
import { tableColumn } from '@/components/table/column'
import {
  queryAppTaskBody,
  respAppTaskData,
} from '@/pages/member/api/types/flowapp'
import {
  reqAppAddToOutCome,
  reqDownAppRunLogData,
  reqGetAppRunLogData,
  reqGetAppTaskList,
} from '@/pages/member/api/flowapp.ts'
import {
  reqSmartFlowFindPage,reqUpdatePutStatus,
} from '@/pages/member/api/flowapp.ts'
import AppLogHeader from '@/pages/member/views/flowapp/components/AppLogHeader.vue'
import dialogCom from '@/components/dialog/index.vue'
import AppLog from './components/AppLog.vue'
import { download } from '@/api/common.ts'
import { getUploadHttpUrl, MsgError, MsgSuccess } from '@/utils/utils.ts'

const column = reactive<tableColumn[]>([
  { label: '序号', prop: 'flowappId' },
  { label: '流程ID', prop: 'id', width: '80' },
  { label: '流程名称', prop: 'flowName' },
  { label: '子流程数', prop: 'subApplicationNum', width: '80' },
  {
    type: 'comp',
    label: '流程说明',
    prop: 'id',
    align: 'center',
    style: { link: true, type: 'primary' },
    is: 'el-button',
    txt: '下载',
    callback: (data: respAppTaskData) => onOpenLog(data),
  },
  { label: '创建时间', prop: 'createTime',width:'180' },
  { label: '上架时间', prop: 'putTime' },
  { label: '上架/下架', prop: 'putStatus', type: 'slot', slotName: 'handlePutStatusSlot', width: '120' },
  // {
  //   type: 'comp',
  //   label: '上架/下架',
  //   prop: 'id',
  //   width: '120',
  //   align: 'center',
  //   style: { type: 'primary', size: 'small' },
  //   is: 'el-button',
  //   txt: '上架',
  //   callback: (data: respAppTaskData) => onAddToOutCome(data),
  // },
  {
    label: '操作',
    prop: '-',
    fixed: 'right',
    align: 'center',
    type: 'slot',
    slotName: 'handleSlot',
    width: '160',
  },
])

const isShowLog = ref(false)
const searchKeyword = ref('')
const appList = ref<respAppTaskData[]>([])

onMounted(() => getAppTaskList())

const onInputChange = (val: string) => {
  searchKeyword.value = val
  getAppTaskList()
}

// 添加到成果流
const onAddToOutCome = async (data: respAppTaskData) => {
  const { code, msg } = await reqAppAddToOutCome(data.id)
  code === 0 && MsgSuccess(msg || '添加成功')
  code !== 0 && MsgError(msg || '添加失败')
}

const clickAppid = ref<number>(0)
const logData = ref([])

// 打开日志窗口
const onOpenLog = async (data: respAppTaskData) => {
  isShowLog.value = true
  clickAppid.value = data.flowappId!
  return await reqGetAppRunLogData(data.id!)
}

// 关闭日志窗口
const onCloseLog = async () => {
  isShowLog.value = false
  clickAppid.value = 0
}

// 下载日志
const onDownLog = async () => {
  const resp = await reqDownAppRunLogData(clickAppid.value)
  if (resp.code === 0 && resp.data) {
    download(getUploadHttpUrl(resp.data))
  }
}

// 删除任务
const deleteflowappRun = async (runId: number) => {
  const { code, msg } = await reqDeleteflowappRun(runId)
  code === 0 && MsgSuccess(msg || '删除成功')
  code !== 0 && MsgError(msg || '删除失败')
  getAppTaskList()
}

// 切换上架状态
const handelUpdatePutStatus = async (id: number) => {
  const { code, msg } = await reqUpdatePutStatus(id)
  code === 0 && MsgSuccess(msg || '状态切换成功')
  code !== 0 && MsgError(msg || '状态切换失败')
  getAppTaskList()
}

// 获取任务列表
const pageNo = ref(1)
const pageSize = ref(10)
const total = ref(0)
const getAppTaskList = async () => {
  const reqData: queryAppTaskBody = {
    pageNo: pageNo.value,
    pageSize: pageSize.value,
    text: searchKeyword.value,
  }
  // let resp = await reqGetAppTaskList(reqData)
  let resp = await reqSmartFlowFindPage(reqData)
  appList.value = resp.data.list
  total.value = resp.data.total
}

const onCurrentChange = (page: number) => {
  pageNo.value = page
  getAppTaskList()
}
</script>

<style scoped lang="scss">
.container {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;

  .input-bgc {
    margin-bottom: 15px;

    h2 {
      font-size: 20px;
      color: #021429;
      font-weight: bold;
    }

    .input {
      width: 200px;
    }
  }
  .putstatus {
    cursor: pointer;
    .dian {
      width: 8px;
      height: 8px;
      // opacity: 0.5;
      border-radius: 50%;
      position: relative;
      z-index: 0;
      display: inline-block;
      &::after {
        content: '';
        width: 4px;
        height: 4px;
        border-radius: 50%;
        z-index: 1;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
    .text {
      margin-left: 5px;
      font-size: 14px;
    }
    &.on {
      .dian {
        background: #38b865d5;
        &::after {
          background: #38B865;
        }
      }
      .text{
        color: #00B42A;
      }
    }
    &.off {
      .dian {
        background: #EB5E12D5;
        &::after {
          background: #EB5E12;
        }
      }
      .text{
        color: #E47470;
      }
    }
  }
}
</style>
